A Layer Object entry (and corresponding layers array entry) is created for every layer (specified by either <LAYER> or <ILAYER> elements). These objects expose various methods and properties (there are currently no events for the Layer object in Communicator preview release 2) that can be used within Javascript to dynamically alter any individual layer in the document.

PropertiesMethodsEvents
above, background, below, bgColor, clip, height, left, name, parentLayer, siblingAbove, siblingBelow, src, top, visibility, width, zIndex moveAbove, moveBelow, moveTo, offset, resize None supported so far
all supported by Netscape 4.0 only

Referencing Layers
All layers defined in a document (the Layer object and layers array are properties of the Document object) can be referenced by their name (given in their NAME attribute) or by their index in the layers array. It's generally easier to reference layers by their name though, as their index in the layers array is determined by their z-order, from back (i.e. the furthest away) to front (the front-most layer). This isn't always the same as their zIndex property (or Z-INDEX attribute in the <ILAYER> or <LAYER> element) as these don't take account of the z-order of the layer with respect to any parent/sibling layers that the particular layer you are trying to reference may have. To reference a particular layer, use :

document.layerName...

or

document.layers.['layerName']...

As layers can be nested, a child layer can be referenced through it's parent layer, thus :

document.layers.['parentlayerName'].layers['layerName']..

To reference a layer in a different window, a valid window reference will need to be used to access the document object (a property of the Window Object), to access the layer object, or layers array.

Back to the Top

Layer Properties
above
The above property returns a reference to the layer object that is above the referenced layer in the z-order, of all the layers in the document. For example, if you authored two layers, one NAMEd 'Red' and one NAMEd 'Blue', with the 'Blue' layer having a higher z-order than the 'Red' layer, then :

document.layers['Red'].above

would return a reference to the 'Blue' layer. (You'd need to append another property, such as name - see below - to be able to make sense of that layer object reference). If the referenced layer is the top-most layer (or the only layer), then the above property would return 'null'. The above property is read-only.

Back to the Top

background
This property returns a reference to the referenced layers background image (if any - it returns 'null' if the referenced layer has no background image). Each background image is an Image Object, whose properties can be interrogated, or methods manipulated. The background property can be dynamically changed (by manipulation of the Image Object properties of the background image.

Back to the Top

below
The below property is the opposite of the above property (see above), in that it returns a reference to the layer that is immediately below (in terms of z-order) the currently referenced layer, or 'null' if the current layer is the bottom, or only layer. The below property is read-only.

Back to the Top

bgColor
This property reflects the referenced layers background colour (as set in the BGCOLOR attribute of either the <ILAYER> or <LAYER> elements). It can be dyamically changed, by setting the property to a new colour, using any valid colour referencing technique (i.e. a #rrggbb hex triplet, or colour name).

Back to the Top

clip
The clip property has 6 sub-properties, namely clip.top, clip.left, clip.right, clip.bottom, clip.width and clip.height, which can be used to determine, or dynamically set the clipping area (the area of the layer that is actually displayed) for the current layer.

Back to the Top

height
The height property reflects the referenced layers height, in pixels. (NOTE : Not currently implemented in Communicator preview 2)

Back to the Top

left
This property reflects the referenced layers left-most point in pixels, relative to either it's parent layer, or the left-most edge of the browser window if it has no parent layer. It can be manipulated to move the layer.

Back to the Top

name
The name property reflects the referenced layers name, as set in the NAME attribute of either the <ILAYER> or <LAYER> element that defines the layer.

Back to the Top

parentLayer
The parentLayer property references the immediate parent layer of the currently referenced layer. If the currently referenced layer has no parent, then parentLayer returns 'null'.

Back to the Top

siblingAbove
siblingAbove references the layer that is above the currently referenced layer (in terms of z-order), of all the layers that share the same parent layer. If the currently referenced layer is has no parent, or is a top-most layer, the siblingAbove property returns 'null'.

Back to the Top

siblingBelow
siblingBelow references the layer that is below the currently referenced layer (in terms of z-order), of all the layers that share the same parent layer. If the currently referenced layer is has no parent, or is a bottom-most layer, the siblingBelow property returns 'null'.

Back to the Top

src
The src property reflects the document that contains the content for the currently referenced layer (i.e. set by the SRC attribute of the <ILAYER> or <LAYER> element that defines the layer. It is read-only, that is, layer content can not be dynamically changed.

Back to the Top

top
This property reflects the referenced layers top-most point in pixels, relative to either it's parent layer, or the top-most edge of the browser window if it has no parent layer. It can be manipulated to move the layer.

Back to the Top

visibility
The visibility property reflects the value of the VISIBILITY attribute (as set in the <ILAYER> or <LAYER> element). It can be manipulated to hide the currently referenced layer or force it to inherit it's parent layers (if any) visibility (by setting the visibility property to inherit or hide within a script function. (show is not currently supported in Communicator preview 2).

Back to the Top

width
The width property reflects the referenced layers width, in pixels. (NOTE : Not currently implemented in Communicator preview 2)

Back to the Top

zIndex
The zIndex property can be used to determine, or dynamically set the z-order (only with respect to parent or sibling layers) of the currently referenced layers. This can be useful for dynamically changing the overlap of any layers within the document.

Back to the Top

Layer Methods
moveAbove (LayerName)
The moveAbove method accepts one argument which must be a valid layer name. The layer referenced for the method is then placed above (in terms of z-order) the layer named in the argument, without physically altering it's position on the screen. After the z-order change, both layers then share the same parent (if one of the layers was a child layer to start with).

Back to the Top

moveBelow (LayerName)
The moveBelow method accepts one argument which must be a valid layer name. The layer referenced for the method is then placed below (in terms of z-order) the layer named in the argument, without physically altering it's position on the screen. After the z-order change, both layers then share the same parent (if one of the layers was a child layer to start with).

Back to the Top

moveTo (x,y)
The moveTo layer accepts two arguments which are screen positions in pixel values. For example :

document.layers['RedLayer'].moveTo (50,200)

would move the layer whose NAME is RedLayer to the position x=50, y=200 on the screen. The position can be anywhere on, or even off, the current browser viewing area.

Back to the Top

offset (Dx,Dy)
This method again accepts two pixel values and moves the referenced layer (by the amounts specified in the two arguments) relative to it's current position. For example :

document.layers['RedLayer'].offset (50,200)

would move the 'RedLayer' layer 50 pixels to the right and 200 pixels down from it's current position.

Back to the Top

resize (width, height)
This method resizes the specified layer to the new pixel values given by the width and height arguments in the method. The actual content of the layer is not re-rendered to reflect the new layer sizing however, rather the layer can be resized, to effectively 'clip' out some of the displayed content. (See the clip property above).

Back to the Top

Layer Events
Currently (for Communicator preview 2), the Layer Object has no events.


The Image Object Scripting Object Model Overview The Scripting Object Model Comparison Table